<template>
	<view class="page">
		<view class="topstart"></view>
		<view class="sign">
			<view class="title">验证码登录</view>
			<view class="title2">请输入手机号</view>
			<view class="phone">
				<view style="width: 80%;">
					<input placeholder='请输入手机号' v-model="phone" type="number" :clearable='false'
						:border="false"></input>
				</view>
			</view>
			<view class="btn">
				<u-button class="btn1" @click="go" :loading="loading" :hair-line="false">同意协议并登录</u-button>
			</view>
			<!-- <view class="agreement">
				<u-checkbox-group>
					<u-checkbox shape='circle' v-model="checked" active-color="red"></u-checkbox>
				</u-checkbox-group>
				<view class="right">
					我已认真阅读、理解并同意
					<navigator url="../../mine/privacyAgreement/privacyAgreement?type=1" hover-class="none"><text
							style="color: #EF6043;">《用户协议》</text></navigator>
					及
					<navigator url="../../mine/privacyAgreement/privacyAgreement?type=3" hover-class="none"><text
							style="color: #EF6043;">《隐私协议》</text></navigator>
					并使用本机号码登录
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		MD5
	} from 'crypto-js';
	import {
		sendSms
	} from '@/request/api.js';
	export default {
		data() {
			return {
				loading: false,
				checked: false,
				value: 0,
				phone: '',
				range: [{
					value: 0,
					text: "+86"
				}, ],
			};
		},
		onShow() {

		},
		methods: {
			change() {},
			go() {
				let that = this
				if (!this.isPhoneNumber(this.phone)) {
					uni.showToast({
						title: '手机号不正确',
						icon: 'none'
					})
					return
				}
				this.loading = true
				const timestamp = Date.now(); // 获取当前时间戳
				let userName = 'caocaodaoleApp'
				let Password = 'e1b5d03c71c6263900d49ab702ebe8d8'
				let src = userName + Password + timestamp
				let encipher1 = MD5(src).toString()
				let encipher2 = encipher1 + Password
				let encipher3 = MD5(encipher2).toString()
				console.log(encipher3, '手机号md5加密');

				getApp().globalData.phone = this.phone
				sendSms({
					phone: that.phone,
					sing: encipher3,
					timestamp: timestamp,
					type: 'REGIST',
					username: userName
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					if (res.success) {
						setTimeout(() => {
							that.loading = false
							uni.navigateTo({
								url: './Settings?phone=' + that.phone + '&result=' + res.result
							})
						}, 1000)
					} else {
						that.loading = false
					}
				})


			},
			isPhoneNumber(input) {
				// 使用正则表达式匹配手机号格式，这里简单起见，假设手机号是11位数字且以1开头
				var regExp = /^1\d{10}$/;
				return regExp.test(input);
			}


		}
	}
</script>

<style lang="less" scoped>
	.page {
		background-image: url('../../static/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.sign {
		padding: 200rpx 20rpx 0 20rpx;

		.agreement {
			margin-top: 40rpx;
			display: flex;
			align-items: baseline;
			font-size: 26rpx;
			color: #B0B0B0;

			.right {
				display: flex;
				flex-wrap: wrap;
			}
		}

		.btn {
			margin-top: 120rpx;
			width: 100%;

			.btn1 {
				width: 95%;
				color: #fff;
				border: none;
				background-color: #ff5d3d;
				box-shadow: 0px 3rpx 20rpx 1px rgba(232, 76, 51, 0.3);
				border-radius: 44rpx;
				opacity: 1;
			}
		}

		.phone {
			background-color: #FAFAFA;
			margin-bottom: 30rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			height: 96rpx;
			padding-left: 20rpx;

			/deep/.uni-select {
				width: 120rpx !important;
				border: none;
				font-size: 32rpx;
				color: #170000;
			}

			.uni-stat__select {
				width: 20% !important;
			}
		}

		.title {
			font-size: 56rpx;
			font-weight: 700;
		}

		.title2 {
			padding-top: 10rpx;
			font-size: 28rpx;
			color: #A17167;
		}
	}

	.topstart {
		height: var(--status-bar-height);
	}

	.header {
		text-align: center;
		color: #170000;
		font-size: 36rpx;
		margin-bottom: 30rpx;
	}
</style>